<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<select name="" id="sel1">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel2">
		<option value="">请选择</option>
	</select>
	<select name="" id="sel3">
		<option value="">请选择</option>
	</select>
	<script src = "area.js"></script>
	<script>
		var sel1 = document.getElementById('sel1');
		var sel2 = document.getElementById('sel2');
		var sel3 = document.getElementById('sel3');

		var html = "<option value='请选择'>请选择</option>";	
		for(var i = 0;i<area.length;i++){
			html+="<option value='"+area[i].name+"'>"+area[i].name+"</option>"
		}
		sel1.innerHTML = html;

		sel1.onchange = function(){
			var val = this.value;
			var html = "<option value='请选择'>请选择</option>";
			for(var i = 0;i<area.length;i++){
				if(val == area[i].name){
					for(var j = 0;j<area[i].city.length;j++){
						html += "<option value='"+area[i].city[j].name+"'>"+area[i].city[j].name+"</option>"
					}
					sel2.innerHTML = html;
					break;
				}
			}
		}
		sel2.onchange = function(){
			var val = this.value;
			var html = "<option value='请选择'>请选择</option>";
			for(var i = 0;i<area.length;i++){
				for(var j = 0;j<area[i].city.length;j++){
					if(val == area[i].city[j].name){
						for(var m = 0;m<area[i].city[j].area.length;m++){
							html += "<option value='"+area[i].city[j].area[m]+"'>"+area[i].city[j].area[m]+"</option>"
						}
						sel3.innerHTML = html;
						break;
					}

				}
			}
		}

	</script>
</body>
</html>